<template>
  <div>
    <h1>树形结构演示</h1>
    <el-tree :props="config" :data="treeData" default-expand-all>
      <template v-slot="scope">
        部门名称:{{ scope.data.name }} 负责人: {{ scope.data.manager }}
      </template>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 树形数据演示
      // 一个数组, 其中每个元素都是一个节点, label代表节点名, children代表子节点
      treeData: [
        {
          name: '总裁办',
          manager: '小王'
        },
        {
          name: '人事部',
          manager: '小陈'
        },
        {
          name: '技术部',
          manager: '小梁',
          children: [
            {
              name: '前端开发',
              manager: '小李'
            },
            {
              name: '后端开发',
              manager: '小张'
            }
          ]
        },
        {
          name: '市场部',
          manager: '小何'
        }
      ],
      // 以上的数据, 是我们写死,
      // 都是一般项目中,都是后端请求接口提供,
      // 有可能字段跟el-tree要求的不一致(名字label, 子元素children),
      // 可以通过配置一个指定对应关系的对象给树形设置
      config: {
        label: 'name'
      }
    }
  }
}
</script>

<style>

</style>
